<template>
  <div class="app">
    <div class="contener boderSet">
      <div class="crumbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">基础设置</el-breadcrumb-item>
          <el-breadcrumb-item>资产分类设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <h4>资产分类设置</h4>
      </div>
      <!-- <el-button style="border-radius: 10px;width: 110px;padding: 12px;background-color: #343961;border: 0px;"
                type="primary" icon="el-icon-plus" size="" @click="dialogFormVisible = true"> 新增分类</el-button> -->
      <el-dropdown>
        <el-button type="primary" style="
               border-radius: 10px;
              width: 110px;
              padding: 12px;
              background-color: #343961;
              border: 0px;
              margin-top: 20px;
            ">
          新增分类<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>

        <el-dropdown-menu slot="dropdown">
          <el-button style="width:110px"  type="text" @click="dialogFormVisible = true"> 同一级</el-button><br>
          <el-button style="width:110px" type="text" @click="dialogFormVisible = true">下一级</el-button>
        </el-dropdown-menu>
      </el-dropdown>

      <!--新增资产分类模态框-->

      <div>
        <el-dialog title="新增资产分类" :visible.sync="dialogFormVisible" customClass="customwidth">
          <el-form :model="form">
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input style="width: 200px" v-model="form.pid" autocomplete="off" placeholder="请输入pid 1设备 3易耗品"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input style="width: 200px" v-model="form.className" autocomplete="off" placeholder="请输入类别名称"></el-input>
            </el-form-item>
            <el-form-item label="分类类别" :label-width="formLabelWidth">
              <el-input style="width: 200px" v-model="form.state" autocomplete="off" placeholder="0设备 1易耗品"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="back" type="primary" plain @click="dialogFormVisible = false">返回</el-button>
            <el-button class="save" type="primary" @click="submitClass">保存</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- <div id="query">
        <span class="number">编号:</span
        ><el-input
          class="tab"
          placeholder="请输入编号"
          v-model="input"
          clearable
        >
        </el-input>
        <span class="number">分类名称:</span
        ><el-input
          class="tab"
          placeholder="请输入分类名称"
          v-model="input1"
          clearable
        >
        </el-input>
        <el-button class="save" type="primary">保存</el-button>
        <el-button class="del" type="primary">删除</el-button>
      </div> -->
      <div class="mainpart">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick1">
          <el-tab-pane label="教学设备分类" name="first">
            <assetClassDila></assetClassDila>
          </el-tab-pane>
          <el-tab-pane label="易耗品分类" name="second">
            <consumeClassDila></consumeClassDila>
          </el-tab-pane>
          <!-- <el-tab-pane label="其他资产分类" name="third">
            <othersDila></othersDila>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <!-- <div>
        <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
          :props="defaultProps">
        </el-tree>
      </div> -->
    </div>
  </div>
</template>
  
<script>
import assetClassDila from "@/components/Pevin_Infrastructure/assetClassDila.vue";
import consumeClassDila from "@/components/Pevin_Infrastructure/consumeClassDila.vue";
import othersDila from "@/components/Pevin_Infrastructure/othersDila.vue";
import infras from "@/serive/Infrastructure";

export default {
  components: {
    assetClassDila,
    consumeClassDila,
    othersDila,
  },
  data() {
    return {
      input: "",
      input1: "",
      activeName: "first",
      options: [
        {
          value: "选项1",
          label: "同一级",
        },
        {
          value: "选项2",
          label: "下一级",
        },
      ],
      dialogFormVisible: false,
      form: {
        pid: "",
        className: "",
        state: '',
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
      value: "",
    };
  },
  methods: {
    handleClick() {
      var q1 = document.getElementById("query");
      q1.style.visibility = "visible";
    },
    handleClick1(tab, event) {
      console.log(tab, event);
    },


    //新增分类

    submitClass(){
      infras.classAdd(this.form).then((_) => {
        this.$message({
          type: 'success',
          message: '添加成功',
        })
        this.dialogFormVisible = false;
      })
    }

  },
  created() { },
};

</script>
  
<style>
.contener {
  margin: 20px 30px;
  padding: 30px;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h4 {
  font-size: 24px;
}

.crumbs {
  margin-bottom: 20px;
}

.tab {
  margin-left: 10px;
  width: 200px;
}

#query {
  position: absolute;
  margin-left: 130px;
  margin-top: -35px;
  visibility: hidden;
}

.save {
  margin-right: 28%;
  background-color: #343961;
  border: 0px;
}

.del {
  /* margin-right: 20px; */
  background-color: #ed7d84;
  border: 0px;
}

.customwidth {
  width: 25% !important;
  /* min-width: 100px !important */
  border-radius: 10px;
}




.number {
  font-size: 1em;
  margin-left: 50px;
  color: #343961;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.mainpart {
  margin-top: 20px;
  font-size: 1em;
}
</style>